﻿@page "/displays"

<h3>Display 显示组件</h3>

<h4>显示静态文本数据</h4>

<Block Title="基础用法" Introduction="仅显示">
    <div class="row g-3">
        <div class="col-auto col-form-label">
            <span>基本用法</span>
        </div>
        <div class="col-6">
            <Display TValue="string" Value="@Model.Name" />
        </div>
    </div>
</Block>

<Block Title="双向绑定数据" Introduction="通过双向绑定可以自动获取资源文件中的显示标签">
    <p><code>Display</code> 组件开启双向绑定时，会根据绑定的 <code>Model</code> 属性值去自动获取 <code>Display/DisplayName</code> 标签值并且显示为前置 <code>Label</code>，通过 <code>DisplayText</code> 属性可以自定义显示前置标签，或者通过 <code>ShowLabel</code> 属性关闭前置标签是否显示</p>
    <div class="row g-3">
        <div class="col-12">
            <Divider Text="自定义标签" />
        </div>
        <div class="col-12">
            <p>设置 <code>DisplayText</code> 值为 <b>自定义标签</b></p>
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@Model.Name" DisplayText="自定义标签" ShowLabel="true" />
        </div>
        <div class="col-12">
            <Divider Text="占位" />
        </div>
        <div class="col-12">
            <p>无论是否设置 <code>DisplayText</code> 值，当 <code>ShowLabel</code> 为 <code>true</code> 时均显示</p>
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@Model.Name" ShowLabel="true" />
        </div>
        <div class="col-12">
            <Divider Text="不占位" />
        </div>
        <div class="col-12">
            <p>无论是否设置 <code>DisplayText</code> 值，当 <code>ShowLabel</code> 为 <code>false</code> 时均不显示</p>
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@Model.Name" />
        </div>
    </div>
</Block>

<Block Title="泛型绑定" Introduction="<code>Display</code> 组件内置对 <code>枚举</code> <code>集合</code> <code>数组</code> 进行处理，如不符合条件时，请自定义格式化或者回调委托方法">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Display FormatString="000" @bind-Value="@Model.Count" ShowLabel="true" DisplayText="整型" />
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@Model.Education" ShowLabel="true" DisplayText="枚举" />
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@Model.Hobby" ShowLabel="true" DisplayText="集合" />
        </div>
        <div class="col-12 col-sm-6">
            <Display @bind-Value="@ByteArray" ShowLabel="true" DisplayText="数组" />
        </div>
        <div class="col-12 col-sm-6">
            <Display Value="@DateTime.Now" ShowLabel="true" DisplayText="DateTime" />
        </div>
        <div class="col-12 col-sm-6">
            <Display Value="@DateTimeOffset.Now" ShowLabel="true" DisplayText="DateTimeOffset" />
        </div>
    </div>
</Block>

<Block Title="表单内使用" Introduction="<code>Display</code> 组件在表单组件 <code>EditorForm</code> 中使用，多用于明细页，不可编辑模式">
    <EditorForm Model="@Model" ItemsPerRow="3" IsDisplay="true">
        <FieldItems>
            <EditorItem @bind-Field="@Model.Hobby" Data="@Hobbys" />
        </FieldItems>
    </EditorForm>
</Block>

<Block Title="自定义格式" Introduction="设置 <code>FormatString</code> 属性值为 <code>yyyy-MM-dd</code> 时，组件显示的时间格式为年月日">
    <div class="row g-3">
        <div class="col-12 col-sm-6">设置 <code class="ms-1">FormatString</code></div>
        <div class="col-12 col-sm-6">
            <Display Value="DateTime.Now" FormatString="yyyy-MM-dd" />
        </div>
        <div class="col-12 col-sm-6">设置 <code class="ms-1">Formatter</code></div>
        <div class="col-12 col-sm-6">
            <Display Value="DateTime.Now" FormatterAsync="@DateTimeFormatter" />
        </div>
    </div>
    <p class="mt-3"><code>Display</code> 组件绑定 <code>byte[]</code> 数组，格式化成 <code>base64</code> 编码字符串示例</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">设置 <code class="ms-1">Formatter</code></div>
        <div class="col-12 col-sm-6">
            <Display Value="@ByteArray" FormatterAsync="@ByteArrayFormatter" />
        </div>
    </div>
</Block>

<Block Title="自动翻译为 Text" Introduction="设置 <code>Lookup</code> 值为 <code>IEnumerable&lt;SelectedItem&gt;</code> 集合，组件将通过此数据集，进行通过 <code>Value</code> 显示 <code>Text</code> 翻译工作">
    <p>
        <div>本例中组件 <code>Value="@@IntValue"</code> 设置 <code>Lookup="@@IntValueSource"</code> 组件将 <code>Value</code> 值对应的 <code>Text</code> 显示出来</div>
        <div><b>InitValue</b>: 1,2,3</div>
        <div><b>IntValueSource</b>: Text1,Text2,Text3</div>
    </p>
    <Display Value="@IntValue" Lookup="@IntValueSource" />
</Block>

<AttributeTable Items="@GetAttributes()" />
